<template>
    <div>
		<div style="display: flex; justify-content: center;margin-top: 30px;">
			<h3>
				本月组织人数增长趋势
			</h3>
		</div>
		<div>
			<v-chart style="height:250px;" :option="option"></v-chart>
		</div>
	</div>
</template>

<script>
import * as echarts from 'echarts'
import increaseService from '@/api/organization/increaseService.js';
export default {
	data() {
      return {
         chartData:['0','0','0','0'],
         day: ['7','14','21','28'],
         option: {},
         loading: false,
      }
   },
   mounted() {
		this.init()
	},
   methods: {
		currentUser() {
			var userInfo = this.$TOOL.data.get("USER_INFO");
			return userInfo;
		},
		init(){
			this.loading = true;
			let postId=this.currentUser().postIdList[0]
			increaseService.selectTrend(postId)
			.then((data)=>{
            this.chartData=data.list
				this.loading = false;
            this.initChart()
			});
		},
		initChart(){
			this.option = {
               //   backgroundColor:"#0F285C",
               grid: {
                  containLabel: true,
                  top: 30,
                  right: 15,
                  bottom: 0,
                  left: 15
               },
               tooltip: {
                  trigger: "axis",
                  axisPointer: {
                     type: 'shadow'
                  },
                  formatter: params => {
                     const {
                        name,
                        data,
                     } = params[0];
                     return `
                        <span style="font-size: 14px;font-family: Source Han Sans CN-Medium;font-weight: 500;color: #FFFFFF;margin-bottom:12px;">${name}</span>
                        <sapn style="font-size: 14px;font-family: Source Han Sans CN-Medium;font-weight: 500;color: #FFFFFF;margin-bottom:4px;">：${data} 次</span>
                     `
                  },
                  extraCssText: 'opacity: 0.8;background-color:#050F1B;padding:16px;box-shadow: 1px 6px 15px 1px rgba(0,0,0,0.13);border-radius: 4px;filter: blur(undefinedpx);border:none;'
               },
               xAxis: {
                  // 类目轴
                  type: "category",
                  data: ['7', '14', '21', '28'],
                  axisTick: {
                     show: false //隐藏X轴刻度
                  },
                  axisLine: {
                     lineStyle: {
                        color: "#CCCCCC"
                     }
                  },
                  axisLabel: {
                     show: true,
                     textStyle: {
                        color: '#000',
                        fontSize: 14,
                        fontFamily: 'Source Han Sans CN-Regular',
                     }
                  },
               },
               yAxis: {
                  type: 'value',
                  name: "",
                  nameTextStyle: {
                     color: 'rgba(0,0,0,0.65)',
                     fontSize: 14,
                     fontFamily: 'Source Han Sans CN-Regular',
                     align: "left",
                     verticalAlign: "center",
                  },
                  axisLabel: {
                     color: 'rgba(0,0,0,0.65)',
                     textStyle: {
                        fontSize: 14
                     },
                  },
                  axisLine: {
                     show: false,
                     lineStyle: {
                        color: 'rgba(223, 223, 223, 1)',
                     }
                  },
                  axisTick: {
                     show: false
                  },
                  splitLine: {
                     lineStyle: {
                        color: 'rgba(223, 223, 223, 1)',
                        type: "dashed",
                     }
                  }
               },
               series: [
                  {
                     type: "bar",
                     barWidth: "50%",
                     showBackground: true,
                     backgroundStyle: {
                        color: "transparent"
                     },
                     itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                           { offset: 0, color: "#4B87FFFF" },
                           { offset: 1, color: "#82BCFFFF" }
                        ])
                     },
                     data: this.chartData
                  }
               ]
            };
		}
	},
}
</script>

<style>

</style>